<!doctype html>
<html>
  <head>
    <title>Step 3: Reading data · Solid</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link
      rel="shortcut icon"
      type="image/x-icon"
      href="/favicon.ico?"
    />
    <link rel="stylesheet" href="/assets/css/main.css" />
  </head>

  <body>
    <header>
  <nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
      <a class="navbar-item" href="/">
        <img
          src="/assets/img/solid-emblem.svg"
          alt="[Solid logo]"
        />
      </a>
      <a class="is-hidden-mobile navbar-item navbar-brand-name is-uppercase is-size-4" href="/">
        Solid
      </a>
    </div>
  
    <div class="navbar-menu">
      <div class="navbar-end">
        
          <a
            class="navbar-item is-size-6 is-size-5-tablet"
            href="/use-solid"
          >Use Solid</a>
        
          <a
            class="navbar-item is-size-6 is-size-5-tablet"
            href="/for-developers"
          >For Developers</a>
        
          <a
            class="navbar-item is-size-6 is-size-5-tablet"
            href="/for-enterprises"
          >For Enterprises</a>
        
          <a
            class="navbar-item is-size-6 is-size-5-tablet"
            href="/faqs"
          >FAQ</a>
        
      </div>
    </div>
  </nav>
</header>

    <div id="draft-warning"></div>
<script>
  if (document.location.hostname === 'localhost' || document.location.hostname === 'solid.github.io') {
    const draftWarningElement = document.getElementById('draft-warning')
    draftWarningElement.innerHTML = `
      <div class="message is-danger is-large" role="alert">
        <div class="message-body">
          You are currently viewing a draft version of the Solid website. If you are looking for reliable information, visit the live site at <a href="https://solidproject.org/for-developers/apps/first-app/3-reading-data" title="The official Solid website">SolidProject.org</a>.
        </div>
      </div>
    `;
  }
</script>

    
  <nav id="breadcrumb" class="breadcrumb">
    <div class="container">
      <ul>
        <li>
          <a href="/">
            Home
          </a>
        </li>
        
        
          <li>
            <a href="/for-developers/">
              For Developers
            </a>
          </li>
        
        
        
          <li>
            <a href="">
              Step 3: Reading data
            </a>
          </li>
        
      </ul>
    </div>
  </nav>


    <main>
      <div class="container">
  <div class="columns">
    <div class="column is-two-thirds">
      <article class="section content">
        <p>(<a href="https://gitlab.com/vincenttunru/notepod/commit/5c534abdd2d6ed18be8ddc256427fb7bc0baae71">This step as a Git commit.</a>)</p>

<p>We’ve <a href="/for-developers/apps/first-app/1-authentication">got the user’s WebID</a> and we
<a href="/for-developers/apps/first-app/2-understanding-solid">know that it points to a
Document</a>; it’s time we actually
read some data from that Document!</p>

<p>We’ll be using <a href="https://vincenttunru.gitlab.io/tripledoc/">Tripledoc</a>, which was designed
specifically for this purpose. Other libraries exist, such as
<a href="https://www.npmjs.com/package/ldflex">ldflex</a>, <a href="https://www.npmjs.com/package/rdf-ext">rdf-ext</a> and
<a href="https://www.npmjs.com/package/rdflib">rdflib</a>; Tripledoc intentionally has a more limited scope designed to aid
“thinking in Solid”. If at some point in the future you want to start combining many different
data sources, you might want to consider investigating these alternative libraries.</p>

<p>We’ll try to get the user’s name as follows:</p>

<ol>
  <li>Fetch the Document living at their WebID.</li>
  <li>From that Document, read the Subject representing the current user’s profile.</li>
  <li>Get the <code class="highlighter-rouge">foaf:name</code> of that Subject, if set.</li>
</ol>

<p>In code, that looks like this:</p>

<div class="language-typescript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="p">{</span> <span class="nx">fetchDocument</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">tripledoc</span><span class="dl">'</span><span class="p">;</span>

<span class="k">async</span> <span class="kd">function</span> <span class="nx">getName</span><span class="p">(</span><span class="nx">webId</span><span class="p">)</span> <span class="p">{</span>
  <span class="cm">/* 1. Fetch the Document at `webId`: */</span>
  <span class="kd">const</span> <span class="nx">webIdDoc</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">fetchDocument</span><span class="p">(</span><span class="nx">webId</span><span class="p">);</span>
  <span class="cm">/* 2. Read the Subject representing the current user's profile: */</span>
  <span class="kd">const</span> <span class="nx">profile</span> <span class="o">=</span> <span class="nx">webIdDoc</span><span class="p">.</span><span class="nx">getSubject</span><span class="p">(</span><span class="nx">webId</span><span class="p">);</span>
  <span class="cm">/* 3. Get their foaf:name: */</span>
  <span class="k">return</span> <span class="nx">profile</span><span class="p">.</span><span class="nx">getString</span><span class="p">(</span><span class="dl">'</span><span class="s1">http://xmlns.com/foaf/0.1/name</span><span class="dl">'</span><span class="p">)</span>
<span class="p">}</span>
</code></pre></div></div>

<p>Tip: you can avoid typing the full ‘http://xmlns.com/foaf/0.1/name’ every time using the library
<a href="https://www.npmjs.com/package/rdf-namespaces">rdf-namespaces</a>. It exports strings for the URLs of
the terms in common Vocabularies, turning the above into:</p>

<div class="language-typescript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="p">{</span> <span class="nx">fetchDocument</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">tripledoc</span><span class="dl">'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">foaf</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">rdf-namespaces</span><span class="dl">'</span><span class="p">;</span>

<span class="k">async</span> <span class="kd">function</span> <span class="nx">getName</span><span class="p">(</span><span class="nx">webId</span><span class="p">)</span> <span class="p">{</span>
  <span class="cm">/* 1. Fetch the Document at `webId`: */</span>
  <span class="kd">const</span> <span class="nx">webIdDoc</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">fetchDocument</span><span class="p">(</span><span class="nx">webId</span><span class="p">);</span>
  <span class="cm">/* 2. Read the Subject representing the current user's profile: */</span>
  <span class="kd">const</span> <span class="nx">profile</span> <span class="o">=</span> <span class="nx">webIdDoc</span><span class="p">.</span><span class="nx">getSubject</span><span class="p">(</span><span class="nx">webId</span><span class="p">);</span>
  <span class="cm">/* 3. Get their foaf:name: */</span>
  <span class="k">return</span> <span class="nx">profile</span><span class="p">.</span><span class="nx">getString</span><span class="p">(</span><span class="nx">foaf</span><span class="p">.</span><span class="nx">name</span><span class="p">)</span>
<span class="p">}</span>
</code></pre></div></div>
<p><span class="codesandbox-button-wrapper">
<a href="https://codesandbox.io/s/github/Vinnl/notepod/tree/3-reading-data/?module=%2Fsrc%2Fcomponents%2FDashboard.tsx"><img src="/assets/img/play-codesandbox.svg" alt="Edit on CodeSandbox" /></a>
</span></p>

<p>Two things to note here. First, we call <code class="highlighter-rouge">getString</code> to indicate that we are looking for an actual
value (i.e. a Literal), rather than a URL. (Likewise, we could use <code class="highlighter-rouge">getInteger</code> or <code class="highlighter-rouge">getDecimal</code>
if we expected a number instead.) However, the value could also have been a URL pointing to a different
Subject, in which case we could in turn fetch <em>that</em> Document. If that was what we expected, we
could have used the method <code class="highlighter-rouge">getRef</code> instead.</p>

<p>The second thing to consider is that we cannot make any assumptions about what data is, or is not,
present in the user’s Pod. Thus, <code class="highlighter-rouge">profile.getString(foaf.name)</code> might also return <code class="highlighter-rouge">null</code>. This
could happen if the Document does not include the user’s name, if the name is stored differently
(e.g. using <code class="highlighter-rouge">foaf:firstName</code> and <code class="highlighter-rouge">foaf:familyName</code>), or the value of <code class="highlighter-rouge">foaf:name</code> is not a literal string.</p>

<p>Now that we’re able to read data from the user’s WebID, let’s find out how we can read arbitrary
other data.</p>

<p>Next: <a href="/for-developers/apps/first-app/4-data-model">Setting up a Data Model</a></p>

      </article>
    </div>
    <aside id="sidebar" class="column is-one-third is-hidden-mobile section">
      <div class="menu is-large">
        
          

<ul class="menu-list">
  
    
      <li>
        
          <a href="/for-developers/apps/first-app">Writing a Solid application</a>
        
        <!-- This is for categories with sub-categories -->
        
          <!-- List all posts in the category (no subcategories) -->
          <ul>
            
              <li>
                <a
                  href="/for-developers/apps/first-app"
                  
                >Introduction</a></li>
            
              <li>
                <a
                  href="/for-developers/apps/first-app/1-authentication"
                  
                >Step 1: identifying the user</a></li>
            
              <li>
                <a
                  href="/for-developers/apps/first-app/2-understanding-solid"
                  
                >Step 2: Understanding Solid</a></li>
            
              <li>
                <a
                  href="/for-developers/apps/first-app/3-reading-data"
                   class="is-active" 
                >Step 3: Reading data</a></li>
            
              <li>
                <a
                  href="/for-developers/apps/first-app/4-data-model"
                  
                >Step 4: Setting up a Data Model</a></li>
            
              <li>
                <a
                  href="/for-developers/apps/first-app/5-writing-data"
                  
                >Step 5: Writing data & what's next</a></li>
            
          </ul>
        
      </li>
                    <a href="/for-developers/apps/vocabularies"></a>
    
  
    
      <li>
        
          <a href="/for-developers/apps/vocabularies">Vocabularies</a>
        
      </li>
    
  
    
      <li>
        
          <a href="/for-developers/apps/common-patterns">Common patterns</a>
        
      </li>
    
  
    
      <li>
        
          <a href="/for-developers/apps/tools">Tools and libraries</a>
        
      </li>
    
  
</ul>
        
      </div>
    </aside>
  </div>
</div>

    </main>
    <footer id="footer" class="footer">
  <div class="container">
    <div class="columns">
      
        <div class="column">
          <ul>
            <li>
              
                <a class="title is-size-5" href="/">Home</a>
              
            </li>
            
              <li>
                
                  <a class="is-size-5" href="/use-solid">Use Solid</a>
                
              </li>
            
              <li>
                
                  <a class="is-size-5" href="/implement">Implement Solid</a>
                
              </li>
            
              <li>
                
                  <a class="is-size-5" href="/team">Team</a>
                
              </li>
            
              <li>
                
                  <a class="is-size-5" href="/faqs">FAQs</a>
                
              </li>
            
          </ul>
        </div>
      
        <div class="column">
          <ul>
            <li>
              
                <span class="title is-size-5">What's New</span>
              
            </li>
            
              <li>
                
                  <a class="is-size-5" href="/this-week-in-solid">This week in Solid</a>
                
              </li>
            
              <li>
                
                  <a class="is-size-5" href="/press">Press</a>
                
              </li>
            
              <li>
                
                  <a class="is-size-5" href="/events">Solid events</a>
                
              </li>
            
          </ul>
        </div>
      
        <div class="column">
          <ul>
            <li>
              
                <a class="title is-size-5" href="/for-developers">For Developers</a>
              
            </li>
            
              <li>
                
                  <a class="is-size-5" href="/for-developers/apps">Writing apps</a>
                
              </li>
            
              <li>
                
                  <a class="is-size-5" href="/for-developers/pod-server">Running a Pod server</a>
                
              </li>
            
              <li>
                
                  <a class="is-size-5" href="/funding">Funding</a>
                
              </li>
            
              <li>
                
                  <a class="is-size-5" href="https://forum.solidproject.org">Forum</a>
                
              </li>
            
          </ul>
        </div>
      
        <div class="column">
          <ul>
            <li>
              
                <span class="title is-size-5">More</span>
              
            </li>
            
              <li>
                
                  <a class="is-size-5" href="/standardisation">Standardisation</a>
                
              </li>
            
              <li>
                
                  <a class="is-size-5" href="/license">License</a>
                
              </li>
            
              <li>
                
                  <a class="is-size-5" href="/logo-usage-guidelines">Logo usage guidelines</a>
                
              </li>
            
          </ul>
        </div>
      
    </div>
  </div>

  <nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
      <a class="navbar-item" href="/">
        <img
          src="/assets/img/solid-emblem.svg"
          alt="[Solid logo]"
        />
      </a>
      <a class="navbar-item" href="mailto:info@solidproject.org">
        info@solidproject.org
      </a>
      <a class="navbar-item" href="https://github.com/solid/" title="Solid on GitHub">
        <span class="image is-24x24">
          <img
            src="/assets/img/fontawesome-free-5.11.2-web/svgs/brands/github.svg"
            alt="GitHub"
            class="brand-icon"
          />
        </span>
      </a>
      <a class="navbar-item" href="https://twitter.com/project_solid" title="Solid on Twitter">
        <span class="image is-24x24">
          <img
            src="/assets/img/fontawesome-free-5.11.2-web/svgs/brands/twitter.svg"
            alt="Twitter"
            class="brand-icon"
          />
        </span>
      </a>
    </div>
  </nav>
</footer>

  </body>


</html>
